<template>
	<view v-if="props.list && props.list.length > 0" class="cu-list menu-avatar">
		<view @click="handleSelect(item)" v-for="(item, index) in list" :key="index" class="cu-item cur">
			<view class="cu-avatar round bg-menu image_65" :style="{ backgroundImage: 'url(' + item.coverUrl + ');' }">
				<text >小区</text>
			</view>
			<view class="content">
				<view>
					<view class="text-cut text-size-30">{{ item.name }}</view>
				</view>
				<view class="text-grey text-sm margin-top-xs text-sigle">{{ item.address }}</view>
				<view class="text-grey text-sm flex ">
					<view class="text-cut">
						所属社区：
						<text class="cuIcon-locationfill text-orange margin-right-xs"></text>
						{{ item.communityName }}
					</view>
				</view>
				<view class="text-grey text-sm  text-textarea">
					{{ item.remark }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { useSettingStore } from '@/stores/index';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		list: {
			default: () => {
				return [
					{
						address: "四川省成都市武侯区簇桥街道12号",
						communityId: 12,
						communityName: "簇桥社区",
						dictIds: null,
						id: 7,
						latitude: "",
						longitude: "",
						name: "簇桥A区",
						region: "",
						remark: "簇桥"
					}
				];
			}
		}
	});
	const handleSelect = (e : any) => {
		emit('action', e);
	};
</script>

<style lang="scss" scoped>
	.cu-list.menu-avatar>.cu-item {
		position: relative;
		display: flex;
		padding-right: 10rpx;
		height: 240rpx;
		background-color: #ffffff;
		justify-content: flex-end;
		align-items: center;
	}
.cu-list.menu-avatar>.cu-item .content {
    position: absolute;
    left: 176rpx;
    width: calc(100% - 96rpx - 60rpx - 120rpx - 50rpx);
    line-height: 1.6em;
}
</style>